<template>
  <div class="delete-container">
    <el-button 
      type="text" 
      @click="dialogVisible = true" 
      class="delete-btn"
      icon="el-icon-delete"
      style="color: #F56C6C">
      删除
    </el-button>

    <el-dialog 
      title="删除确认" 
      :visible.sync="dialogVisible" 
      width="450px"
      :close-on-click-modal="false"
      center>
      
      <div class="delete-content">
        <el-alert
          title="警告"
          type="warning"
          description="您确定要删除该订单吗？此操作不可恢复！"
          show-icon
          :closable="false">
        </el-alert>
        
        <div class="delete-tip">
          <i class="el-icon-warning" style="color: #E6A23C"></i>
          <span>删除后将无法恢复，请谨慎操作</span>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button 
          @click="dialogVisible = false" 
          size="medium"
          plain>
          取消
        </el-button>
        <el-button 
          type="danger" 
          @click="deleteMessageClick" 
          size="medium"
          :loading="deleting"
          icon="el-icon-delete">
          确认删除
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deleteOrderById } from "../api/order";

export default {
  inject: ["reload"],
  data() {
    return {
      dialogVisible: false,
      deleting: false
    };
  },
  methods: {
    async deleteMessageClick() {
      this.deleting = true;
      try {
        const res = await deleteOrderById({
          order_id: this.$store.state.changedOrderId
        });
        
        if (res && res.flag) {
          this.$message.success(res.message || "删除成功");
          this.dialogVisible = false;
          this.reload();
        } else {
          this.$message.error(res?.data || "删除失败");
        }
      } catch (err) {
        this.$message.error("删除操作异常");
        console.error(err);
      } finally {
        this.deleting = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.delete-container {
  display: inline-block;

  .delete-btn {
    padding: 0;
    &:hover {
      color: #F78989 !important;
    }
  }

  .delete-content {
    .delete-tip {
      margin-top: 15px;
      display: flex;
      align-items: center;
      color: #606266;
      font-size: 14px;
      
      i {
        margin-right: 8px;
        font-size: 16px;
      }
    }
  }

  .dialog-footer {
    text-align: center;
    padding: 15px 20px 0;
    border-top: 1px solid #e8e8e8;
  }
}
</style>